<script setup lang="ts">
import { ref } from 'vue'

interface OrderItem {
  name: string
  quantity: number
  price: number
}

const businessName = ref('万家饺子（软件园E18店）')
const totalPrice = ref(49)
const deliveryFee = ref(3)
const selectedPayment = ref('alipay') // 'alipay' 或 'wechat'
const isDetailsVisible = ref(true) // 添加控制订单详情显示的状态

const orderItems = ref<OrderItem[]>([
  { name: '纯肉饺子（水饺）', quantity: 2, price: 15 },
  { name: '玉米鲜肉（水饺）', quantity: 1, price: 16 },
])

// 切换订单详情的显示状态
const toggleDetails = () => {
  isDetailsVisible.value = !isDetailsVisible.value
}
</script>

<template>
  <div class="min-h-screen bg-white pb-20">
    <!-- 订单信息 -->
    <div class="bg-white p-4">
      <div class="text-gray-600 text-lg mb-4">订单信息</div>
      
      <!-- 商家名称 -->
      <div class="flex justify-between items-center mb-4" @click="toggleDetails">
        <div class="flex items-center cursor-pointer">
          {{ businessName }}
          <i class="fa fa-caret-down ml-1" :class="{ 'rotate-180': !isDetailsVisible }"></i>
        </div>
        <span class="text-[#ff4e00]">¥{{ totalPrice }}</span>
      </div>

      <!-- 订单详情 -->
      <div v-show="isDetailsVisible" class="space-y-2">
        <div v-for="item in orderItems" :key="item.name" class="flex justify-between text-gray-600">
          <div>{{ item.name }} × {{ item.quantity }}</div>
          <div>¥{{ item.price }}</div>
        </div>
        <div class="flex justify-between text-gray-600">
          <div>配送费</div>
          <div>¥{{ deliveryFee }}</div>
        </div>
      </div>
    </div>

    <!-- 支付方式 -->
    <div class="bg-white mt-4 p-4">
      <div class="space-y-4">
        <!-- 支付宝 -->
        <div class="flex items-center justify-between" @click="selectedPayment = 'alipay'">
          <div class="flex items-center">
            <img src="@/assets/image/alipay.png" alt="支付宝" class="w-full h-8">
          </div>
          <div class="w-5 h-5 rounded-full border-2 border-gray-300 flex items-center justify-center"
               :class="{ 'border-green-500': selectedPayment === 'alipay' }">
            <div v-if="selectedPayment === 'alipay'" class="w-3 h-3 rounded-full bg-green-500"></div>
          </div>
        </div>

        <!-- 微信支付 -->
        <div class="flex items-center justify-between" @click="selectedPayment = 'wechat'">
          <div class="flex items-center">
            <img src="@/assets/image/wechat.png" alt="微信支付" class="w-full h-8">
          </div>
          <div class="w-5 h-5 rounded-full border-2 border-gray-300 flex items-center justify-center"
               :class="{ 'border-green-500': selectedPayment === 'wechat' }">
            <div v-if="selectedPayment === 'wechat'" class="w-3 h-3 rounded-full bg-green-500"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 确认支付按钮 -->
    <div class="bg-white mt-5 flex justify-center items-center h-5">
      <button class="h-12 w-90 bg-[#2FD878] text-white py-3 rounded-md text-lg">
        确认支付
      </button>
    </div>
  </div>
</template>

<style scoped>
.rotate-180 {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}

.fa-caret-down {
  transition: transform 0.3s ease;
}
</style>